<script setup>
import { getProList, addPro, delPro, editPro, queryPro } from './api/home'
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
const proList = ref([])
const page = ref(1)

const count = ref(0)

onMounted(() => {
  getProList({
    page: page.value,
    count: 10
  }).then(res => {
    // console.log(res);
    proList.value = res.proList
    count.value = res.count
  })
})

// 页码切换的时候调用
function changePage(num) {
  // console.log(num);
  page.value = num

  getProList({
    page: page.value,
    count: 10
  }).then(res => {
    // console.log(res);
    proList.value = res.proList
    count.value = res.count
  })
}


// addClick 添加数据
const title = ref('')
function addClick() {
  addPro({
    proname: title.value
  }).then(res => {
    // console.log(111111, res);
    ElMessage({
      message: res.msg,
      type: 'success',
    })


    // 重新获取列表数据
    getProList({
      page: page.value,
      count: 10
    }).then(res => {
      // console.log(res);
      proList.value = res.proList
      count.value = res.count
    })

  })
}


// delClick 删除数据的点击事件
function delClick(pro) {
  // console.log(pro);
  delPro(pro).then(res => {
    // console.log(res);
    // 重新获取列表数据
    getProList({
      page: page.value,
      count: 10
    }).then(res => {
      // console.log(res);
      proList.value = res.proList
      count.value = res.count
    })
  })
}

// editClick 编辑数据的点击事件
function editClick(pro) {
  pro.proname = '啊哈哈哈哈哈哈哈哈哈'
  editPro(pro).then(res => {
    // 重新获取列表数据
    getProList({
      page: page.value,
      count: 10
    }).then(res => {
      // console.log(res);
      proList.value = res.proList
      count.value = res.count
    })
  })
}


// queryClick 查询数据的点击事件
const proname = ref('')
function queryClick() {
  queryPro({
    proname: proname.value
  }).then(res => {
    proList.value = res.proList
    count.value = res.count
  })
}
</script>

<template>
  <div>
    <input type="text" v-model="title" placeholder="请输入添加商品名称">
    <el-button @click="addClick">添加数据</el-button>
    <br>
    <input type="text" v-model="proname" placeholder="请输入查询商品名称">
    <el-button @click="queryClick">查询数据</el-button>


    <el-table :data="proList" style="width: 100%">
      <el-table-column label="图片">
        <template #="data">
          <img style="width: 40px" :src="data.row.img1" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="商品名称" width="300" />
      <el-table-column prop="kind" label="商品分类" width="200" />
      <el-table-column prop="price" label="商品价格" width="200" />
      <el-table-column label="操作" width="200">
        <template #="data">
          <el-button @click="editClick(data.row)">编辑</el-button>
          <el-popconfirm @confirm="delClick(data.row)" title="你确定要删除这条数据吗?">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm> </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" v-model:current-page="page" @current-change="changePage"
      :total="count" />
  </div>
</template>

<style scoped></style>
<!-- 
  上午 8点30 到 8点40吃早上
  8点45 到 9点45 投简历
  10点 到 12 点 背面试题同桌前后桌开始提问面试题

  下午 2点 到 3点 投简历
  3点 到 6点 写阶段项目

  每天白天 3 个小时写项目
  晚自习 阶段项目
 -->